<template>
	<view class="container">
		<u-navbar title="盲盒结果" placeholder :autoBack="true"></u-navbar>
		<view class="box-list pad-32">
			<view class="font-24 text-center color-grey mar-top-bottom-30">商品陆续从链上转入个人中心，如有延迟请耐心等待</view>
			<view v-for="item in success.goods"
				class="list mar-top-bottom-30 centerY betweenX bg-white pad-20 radius12">
				<view class="centerY">
					<image class="image-box radius12" :src="item.goods_info.cover" mode="aspectFill"></image>
					<view class="betweenY heigth mar-left-20">
						<view class="font-30">{{item.goods_info.name}}</view>
						<view class="color-grey font-24">#{{item.code}}</view>
					</view>
				</view>
			</view>
			
			<!-- 未中奖 -->
			<view v-for="item in failed" class="list mar-top-bottom-30 centerY betweenX bg-white pad-20 radius12">
				<view class="centerY">
					<view class="wei-bg">
						<image class="image-box radius12" src="../../static/icon/sale-done.png" mode="aspectFill">
						</image>
					</view>
					<view class="betweenY heigth mar-left-20">
						<view class="font-30">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-white centerY">
			<view class="openBlindbox mar-right-30" @click="hanldeMyGoods">我的藏品</view>
			<view class="button flex-w" @click="handelPay"> 继续购买 </view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		openBlindBox
	} from '@/config/api.js'
	export default {
		data() {
			return {
				success: uni.getStorageSync('openSuccess'),
				failed: uni.getStorageSync('openFailed'),
			}
		},
		onLoad() {

		},
		methods: {
			// 继续购买
			handelPay() {
				uni.switchTab({
					url: '/pages/market/market'
				})
			},
			// 我的藏品
			hanldeMyGoods() {
				uni.redirectTo({
					url: '/pages/my/myCollection'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
		
		.wei-bg{
			background-color: #f5f5f5;
		}

		.image-box {
			display: block;
			width: 100rpx;
			height: 100rpx;
		}

		.heigth {
			height: 100rpx;
		}

		.box-list {
			padding-bottom: 120rpx;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
			border: 2rpx solid $uni-theme;
			box-sizing: border-box;
		}

		.openBlindbox {
			border: 2rpx solid $uni-theme;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
			color: $uni-theme;
			width: 260rpx;
			box-sizing: border-box;
		}
	}
</style>